<template>
  <BasicTable border :table-data="tableData" :columns="columns">
    <template #action="scope">
      <el-button type="text" @click="handleEdit(scope)">Edit</el-button>
    </template>
  </BasicTable>
</template>

<script setup lang="ts">
import { MockRestApi } from '@/api/login';
import BasicTable from '@/components/table/BasicTable.vue';
import { ColumnItem } from '@/components/table/types/columns';
import { ref } from 'vue';
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
];
const columns = ref<ColumnItem[]>([
  {
    type: 'index',
    prop: 'index',
    label: '序号',
    width: '100',
  },
  {
    prop: 'date',
    label: '日期',
    width: '100',
  },
  {
    prop: 'name',
    label: '姓名',
  },
  {
    prop: 'address',
    label: '地址',
  },
  {
    prop: 'action',
    label: '操作',
  },
]);
const handleEdit = (a) => {
  //! 测试mock接口
  MockRestApi().then((res) => {
    console.log(res);
  });
  console.log('edit', a);
};
</script>

<style scoped lang="scss"></style>
